<template>
    <i-card style="width:500px;margin-bottom: 10px;">
        <div slot="title" :class="{done:item.isDone}" style="position: relative">
            {{ item.title }}
            <div style="float: right;margin-left: 10px;" @click="$emit('delete',index)">删除</div>
            <div style="float: right;cursor: pointer;" v-if="!item.isDone" @click="$emit('done',index)">完成</div>
            <div v-if="item.isDone" style="border-top: 1px solid #999;position: absolute;top: 50%;width: 100%"></div>
            <div style="width: 28px;height: 14px;position: absolute;right: 0;top: 0;cursor: pointer;"
                 @click="$emit('delete',index)"></div>
        </div>
        <div>
            {{ item.createTime }}
        </div>
    </i-card>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Card, Button } from 'view-design';
import { TodoType } from '@/utils/types';

@Component({
    components: {
        ICard: Card,
        IButton: Button,
    },
})
export default class TodoItem extends Vue {
    @Prop() item!: TodoType;
    @Prop() index!: number;
}
</script>

<style lang="scss" scoped>
.done {
    color: #ccc;
}
</style>